import { useNamespace } from '@ibiz-template/vue3-util';
import { IDETBUIActionItem } from '@ibiz/model-core';
import { defineComponent, PropType, ref, VNode } from 'vue';
import { ToolbarController } from '../toolbar.controllerr';
import './export-excel.scss';

export const IBizExportExcel = defineComponent({
  name: 'IBizExportExcel',
  props: {
    size: {
      type: String,
      required: false,
    },
    item: {
      type: Object as PropType<IDETBUIActionItem>,
      required: true,
    },
    btnContent: {
      type: Function,
      required: true,
    },
    controller: {
      type: Object as PropType<ToolbarController>,
    },
  },
  emits: ['exportExcel'],
  setup(props, { emit }) {
    const ns = useNamespace('export-excel');
    const startPage = ref(1);
    const endPage = ref(9999);
    const onCommand = (command: string, e: MouseEvent): void => {
      if (!command) {
        return;
      }
      emit('exportExcel', e, {
        type: command,
        startPage: startPage.value,
        endPage: endPage.value,
      });
    };
    return { ns, endPage, startPage, onCommand };
  },
  render() {
    return (
      <el-dropdown
        size={this.$props.size}
        onCommand={this.onCommand}
        popper-class={this.ns.b()}
        trigger='click'
      >
        {{
          default: (): VNode => {
            return (
              <el-button title={this.item.tooltip} size={this.$props.size}>
                {this.btnContent(this.item)}
              </el-button>
            );
          },
          dropdown: (): VNode[] => {
            return [
              <el-dropdown-item command='maxRowCount'>
                导出全部(最大导出1000行)
              </el-dropdown-item>,
              <el-dropdown-item command='activatedPage'>
                导出当前页
              </el-dropdown-item>,
              <el-dropdown-item command='selectedRows'>
                导出当前选中
              </el-dropdown-item>,
              <el-dropdown-item class={this.ns.e('custom')} command=''>
                <el-input
                  type='number'
                  v-model={this.startPage}
                  size='small'
                  maxlength='4'
                  onClick={(event: Event): void => {
                    event.stopPropagation();
                  }}
                  onChange={(value: number): void => {
                    this.startPage = value;
                  }}
                ></el-input>
                <span
                  class='item-text'
                  onClick={(event: Event): void => {
                    event.stopPropagation();
                  }}
                >
                  -
                </span>
                <el-input
                  v-model={this.endPage}
                  size='small'
                  type='number'
                  maxlength='4'
                  onClick={(event: Event): void => {
                    event.stopPropagation();
                  }}
                ></el-input>
                <span
                  class='item-text'
                  onClick={(event: Event): void => {
                    event.stopPropagation();
                  }}
                >
                  页
                </span>
                <el-button
                  onClick={(e: MouseEvent): void =>
                    this.onCommand('customPage', e)
                  }
                  size='small'
                >
                  导出
                </el-button>
              </el-dropdown-item>,
            ];
          },
        }}
      </el-dropdown>
    );
  },
});
